<template>
  <el-dialog
    :append-to-body="false"
    v-model="dialogVisible"
    title="重练配置"
    class="retrain-dialog"
    @close="closeDialog"
  >
    <el-form :rules="rules" :model="form" ref="formRef" class="retrain-form">
      <el-form-item label="错题重练：" required prop="wrongReturn">
        <el-switch v-model="form.wrongReturn" />
      </el-form-item>
      <div class="flex return-box" v-if="form.wrongReturn">
        <!-- <el-form-item
          label="重练方式"
          prop="returnType"
          label-position="top"
          class="form"
        >
          <el-select
            v-model="form.returnType"
            placeholder="请选择重练方式"
            style="width: 1.2rem"
            :fit-input-width="true"
            popper-class="retrain-select-overlay"
          >
            <el-option
              v-for="item in returnTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="重练时间" prop="returnTime" label-position="top">
          <el-date-picker
            @change="onChangeReturn"
            :disabled-date="disabledDate"
            v-model="form.returnTime"
            format="YYYY-MM-DD HH:mm"
            type="datetime"
            style="width: 1.2rem"
            placeholder="请选择你重练时间"
          />
        </el-form-item>
        <el-form-item
          label="重练题型"
          prop="returnQuesType"
          label-position="top"
        >
          <el-select
            v-model="form.returnQuesType"
            placeholder="请选择重练题型"
            style="width: 1.2rem"
            :fit-input-width="true"
            popper-class="retrain-select-overlay"
          >
            <el-option
              v-for="item in returnQUesTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <button class="cancel btn" @click="closeDialog">取消</button>
      <button class="confirm btn" @click="confirmConfig">确定</button>
    </template>
  </el-dialog>
</template>
<script setup>
import { updateRetrainConfig } from '@/apis/assignment'
import { returnQUesTypeOptions } from '@/views/assignment/util.js'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import { ref, computed, watch } from 'vue'

const props = defineProps({
  visible: {
    default: false,
    type: Boolean
  },
  taskInfo: {
    type: Object
  }
})

const emits = defineEmits(['close', 'update:visible'])

const dialogVisible = computed({
  get() {
    return props.visible
  },
  set(value) {
    emits('update:visible', value)
  }
})

const rules = ref({
  returnTime: [
    {
      required: true,
      validator: (_, value, callback) => {
        if (dayjs(value).unix() <= dayjs(props.taskInfo?.deadline).unix()) {
          callback(new Error('重练时间应在截止时间之后'))
        }
        callback()
      },
      trigger: 'change'
    }
  ],
  returnType: [
    { required: true, message: '请选择重练方式', trigger: 'change' }
  ],
  returnQuesType: [
    { required: true, message: '请选择重练题型', trigger: 'change' }
  ]
})

const form = ref({
  wrongReturn: false,
  returnType: 1, // 重练方式
  returnTime: dayjs()
    .add(4, 'day')
    .set('hour', 7)
    .set('minute', 0)
    .set('second', 0), // 重练时间
  returnQuesType: 0 // 重练题型
})

const disabledDate = time => {
  const deadline = props.taskInfo?.deadline
  return time.getTime() <= dayjs(deadline).add(-1, 'day').valueOf()
}

const formRef = ref()
const confirmConfig = async () => {
  let flag = true
  if (formRef.value) {
    await formRef.value.validate(valid => {
      if (!valid) flag = false
    })
  }
  if (!flag) return
  const params = {
    is_open: form.value.wrongReturn ? 1 : 0,
    task_id: props.taskInfo.taskId
  }
  if (form.value.wrongReturn) {
    params.push_method = form.value.returnType
    params.retrain_time = dayjs(form.value.returnTime).unix()
    params.question_type = form.value.returnQuesType
  }
  const res = await updateRetrainConfig(params)
  if (res.code === 1) {
    closeDialog()
    ElMessage.success('修改重练配置成功！')
    setTimeout(() => {
      location.reload()
    }, 500)
  }
}

const closeDialog = () => {
  formRef.value && formRef.value.resetFields()
  emits('close')
}

watch(
  () => props.visible,
  val => {
    const retrainInfo = props.taskInfo.retrain_info
    if (val && retrainInfo) {
      form.value.wrongReturn = true
      form.value.returnQuesType = retrainInfo.question_type
      form.value.returnType = retrainInfo.push_method
      form.value.returnTime = dayjs(retrainInfo.retrain_time).valueOf()
    }
  }
)
</script>
<style lang="less" scoped>
.retrain-dialog {
  .return-box {
    gap: 20px;
    margin-bottom: 10px;
  }

  .btn {
    box-shadow: unset;
    border: 1px solid #5466e7;
    margin-left: 12px;
    font-size: 14px;
    cursor: pointer;
    padding: 3px 15px;

    &.cancel {
      background-color: #fff;
      color: #5466e7;
    }

    &.confirm {
      background-color: #5466e7;
      color: #fff;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}
</style>
<!-- eslint-disable -->
<style lang="less">
.retrain-select-overlay {
  * {
    font-size: 14px;
  }
}
.retrain-dialog {
  .retrain-form {
    .el-form-item {
      * {
        font-size: 14px;
      }
      &__label {
        color: #333;
        font-weight: 700;
      }

      &__error {
        font-size: 12px;
      }
    }
  }
}
</style>
